<template>
	<div class="edu_edit">
		<warn-p :class='type'></warn-p>
		<div class="title">
			<div class="ico"></div>
			<span>比赛项目</span>
		</div>
		<div class="ind1">
			<span>参与时间</span>
			<div class="star">
				<button @click="Year1()">
					{{times[0]}}
					<div class="tcontain_out"  v-show="stime.y1">
						<div class="tcontain">
							<div v-for="val in starT" @click="getYear1(val)">{{val}}</div>
						</div>
					</div>
				</button><span style='line-height: 25px;'>年</span>
				<button @click="Month1()">
					{{times[1]}}
					<div class="tcontain_out" v-show="stime.m1">
						<div class="tcontain">
							<div v-for="val in month" @click="getMonth1(val)">{{val}}</div>
						</div>
					</div>
				</button><span style="line-height: 25px">月</span>
				<span>—</span>
				<button @click="Year2()">
					{{times[2]}}
					<div class="tcontain_out" v-show="stime.y2">
						<div class="tcontain">
							<div v-for="val in endT" @click="getYear2(val)">{{val}}</div>
						</div>
					</div>
				</button><span style="line-height: 25px">年</span>
				<button @click="Month2()">
					{{times[3]}}
					<div class="tcontain_out"  v-show="stime.m2">
						<div class="tcontain">
							<div v-for="val in month" @click="getMonth2(val)">{{val}}</div>
						</div>
					</div>
				</button><span style="line-height: 25px">月</span>
			</div>
		</div>
		<div class="ind">
			<span>项目/比赛名称</span>
			<input type="text" maxlength='35' placeholder="填写项目/比赛的全称"  v-model='all.name'>
		</div>
		<div class="ind">
			<span>担任角色</span>
			<input type="text" maxlength='35' placeholder="项目比赛中的作用"  v-model='all.position'>
		</div>
		<div class="end">
			<span>参与描述</span>
			<textarea type="text" class="about" placeholder="重点描述参与后你所获得的收获....."  maxlength='200' v-model='all.about'>
			</textarea>
		</div>
		<div class="but">
			<div @click="Sub()">确认</div>
			<div @click="showWay([0,3])">取消</div>
		</div>
	</div>
</template>

<script>
import Warn from './warn.vue'
import {mapState,mapMutations,mapGetters} from 'vuex'
export default{
	name: 'education',
	components:{
			"warn-p":Warn
		},
	data(){
		return {
			starT:[2013,2014,2015,2016,2017,2018],
			endT:[2016,2017,2018,2019,2020,2021],
			month:['01','02','03','04','05','06','07','08','09',10,11,12],
			stime:{"y1":false,"m1":false,"y2":false,"m2":false},
			times:['','','',''],
			all:{
				'name':'',
				'position':'',
				'about':''
			},
			type:'hidden'
		}
	},
	computed:{
		...mapState(['show'])
	},
	methods:{
		...mapGetters(['getEdu']),
		...mapMutations(['updateEdu','showWay','changeWarn']),
		// 时间相关方法
		Year1(){this.stime.y1 = !this.stime.y1;},
		Month1(){this.stime.m1 = !this.stime.m1},
		Year2(){this.stime.y2 = !this.stime.y2},
		Month2(){this.stime.m2 = !this.stime.m2},
		getYear1(val){this.times[0]=val;},
		getMonth1(val){this.times[1]=val;},
		getYear2(val){this.times[2]=val;},
		getMonth2(val){this.times[3]=val;},
		// 提交、取消方法
		Sub(){
			let data = this.all
			if(this.times.indexOf('')==-1&&this.all.name!=''&&this.all.position!=''){
				data.time = ''
				for(let ind in this.times){
					console.log("val",this.times[ind])
					data.time += this.times[ind]
					if(ind==0||ind==2){
						data.time+='.'
					}
					if(ind==1){
						data.time+='——'
					}
				}
				let arg = this.getEdu()
				this.updateEdu([arg,data])
				this.showWay([0,3])
				this.times=['','','','']
				this.all={
					"name":'',
					'position':'',
					'grade':'',
					'about':''
				}
			}else{
				this.changeWarn('请完善必填信息')
				this.Aler()
			}
		},
		Aler(){
			this.type="show"
			setTimeout(()=>{
				this.type='hidden'
			},3000)
		}
	}
}
</script>

<style scoped lang="less">
	.edu_edit{
		width: 750px;
		height: 400px;
		padding: 50px 40px;
		border-radius: 10px;
		background-color: #fff;
		z-index: 9;
		.title{
			display: flex;
			color: #000;
			line-height: 30px;
			margin-bottom: 30px;
			font-size: 16px;
			background-color: #f7f7f7;
			.ico{
				width: 6px;
				height: 25px;
				border-radius: 3px;
				margin:2.5px 8px;
				background-color: #f23;
			}
		}
		.ind1{
			display: inline-block;
			width: 45%;
			margin-bottom: -23px;
			padding:15px 10px;
			.star{
				width: 205px;
				float: left;
				display: flex;
				height: 22px;
				color: #333;
				padding-left: 20px;
				border: 1px solid #999;
			}
			span{
				display: inline-block;
				float: left;
				width: 70px;
				color: #557;
			}
			.star{
				width: 205px;
				float: left;
				display: flex;
				height: 22px;
				color: #333;
				padding-left: 20px;
				border: 1px solid #999;
				span{
					display: inline-block;
					width: 20px;
					height: 22px;
					color: #333;
				}
				button{
					position: relative;
					outline: none;
					border: none;
					width: 38px;
					height: 22px;
					color: #333;
					background-color: #fff;
					font-size: 14px;
					line-height: 25px;
					.tcontain_out{
						position: absolute;
						top: 22px;
						left: -7px;
						width: 38px;
						height: 100px;
						border: 1px solid #777;
						overflow: hidden;
						.tcontain{
							width: 55px;
							height: 100px;
							text-align: left;
							overflow: auto;
							overflow-x: hidden;
							background-color: #fff;
							div{
								width: 40px;
								text-align: center;
								height: 25px;
							}
							div:hover{
								color: #fff;
								background-color: #22aaff;
							}
						}
					}
				}
			}
		}
		.style2:hover{
			color: #fff;
			background-color: #22aaff;
		}
		.ind{
			display: inline-block;
			width: 45%;
			padding:15px 10px;
			span{
				display: inline-block;
				float: left;
				width: 70px;
				color: #557;
			}
			input{
				display: inline-block;
				line-height: 22px;
				padding-left: 10px;
				width: 215px;
				outline: none;
				height: 22px;
				color: #333;
				border: 1px solid #999;
			}
		}
		.end{
			display: inline-block;
			padding:20px 10px;
			span{
				display: block;
				line-height: 30px;
				width: 70px;
				color: #666;
			}
			.about{			
				width: 580px;
				padding: 10px 20px;
				outline: none;
				resize: none;
				color: #222;
				height: 120px;
				line-height: 30px;
				font-family: "microsoft sans serif";
				border: 1px solid #999;
			}
		}
		.but{
			display: flex;
			justify-content: center;
			div{
				width: 35px;
				padding: 0 10px;
				line-height: 24px;
				margin: 0 10px;
				text-align: center;
				color: #33aeff;
				border-radius: 3px;
				border: 1px solid #aaa;
			}
			div:hover{
				color: #fff;
				background-color: #33aeff;
			}
		}
		input:hover,.star:hover{
			border-color:#378aff;
		}
		
	}
</style>